/**
 * 列车时刻表
 * @email 626097912@qq.com
 * Created by dength on 2017/04/25
 */
import React, { Component, PropTypes } from 'react';
import {
    View,
    Text,
    Modal,
    StyleSheet,
    Platform,
    ScrollView,
    TouchableOpacity,
} from 'react-native';
import Constants from '../../base/constants';

export default class TrainTimetable extends Component {
    constructor(props) {
        super(props);
    }

    onResult() {
        this.props.onHideTrainTimetable();
    }

    render() {
        let { showTrainTimetable } = this.props;
        return (
            <View>
                <Modal
                    animationType='slide'
                    transparent={true}
                    visible={showTrainTimetable}
                    onShow={() => { } }
                    onRequestClose={() => { } } >
                    <TouchableOpacity 
                    activeOpacity={1}
                    onPress={this.onResult.bind(this)}
                    style={styles.modalStyle}>
                        <View style={styles.box}>
                            <View style={styles.box_ul}>
                                <View style={styles.box_ul_cen}>
                                    <Text style={styles.jutubacolor}>列车时刻表</Text>
                                </View>
                                <View style={styles.box_ul_bottom}>
                                    <View style={{marginLeft:8,marginRight:8,}}>
                                        <View style={styles.box_ul_heraer}>
                                            <View style={[{width: 40},styles.box_block]}>
                                                <Text style={styles.jucolor}>站次</Text>
                                            </View>
                                            <View style={[{width: (Constants.window.width-36-80)/3},styles.box_block]}>
                                                <Text style={styles.jucolor}>车站</Text>
                                            </View>
                                            <View style={[{width: (Constants.window.width-36-80)/3},styles.box_block]}>
                                                <Text style={styles.jucolor}>到达</Text>
                                            </View>
                                            <View style={[{width: (Constants.window.width-36-80)/3},styles.box_block]}>
                                                <Text style={styles.jucolor}>发车</Text>
                                            </View>
                                            <View style={[{width: 40},styles.box_block]}>
                                                <Text style={styles.jucolor}>停留</Text>
                                            </View>
                                        </View>
                                        {/*列表开始*/}
                                        <View style={styles.box_ul_li}>
                                            <View style={[{width: 40},styles.box_block]}>
                                                <Text style={styles.jucolor}>1</Text>
                                            </View>
                                            <View style={[{width: (Constants.window.width-36-80)/3},styles.box_block]}>
                                                <Text style={styles.jucolor}>武汉</Text>
                                            </View>
                                            <View style={[{width: (Constants.window.width-36-80)/3},styles.box_block]}>
                                                <Text style={styles.jucolor}>始发</Text>
                                            </View>
                                            <View style={[{width: (Constants.window.width-36-80)/3},styles.box_block]}>
                                                <Text style={styles.jucolor}>08:00</Text>
                                            </View>
                                            <View style={[{width: 40},styles.box_block]}>
                                                <Text style={styles.jucolor}>---</Text>
                                            </View>
                                        </View>
                                        <View style={styles.box_ul_li}>
                                            <View style={[{width: 40},styles.box_block]}>
                                                <Text style={styles.whitecolor}>2</Text>
                                            </View>
                                            <View style={[{width: (Constants.window.width-36-80)/3},styles.box_block]}>
                                                <Text style={styles.whitecolor}>长沙南</Text>
                                            </View>
                                            <View style={[{width: (Constants.window.width-36-80)/3},styles.box_block]}>
                                                <Text style={styles.whitecolor}>10:08</Text>
                                            </View>
                                            <View style={[{width: (Constants.window.width-36-80)/3},styles.box_block]}>
                                                <Text style={styles.whitecolor}>发车</Text>
                                            </View>
                                            <View style={[{width: 40},styles.box_block]}>
                                                <Text style={styles.whitecolor}>3分</Text>
                                            </View>
                                        </View>
                                       


                                    </View>
                                </View>
                            </View>
                        </View>
                    </TouchableOpacity>
                </Modal>
            </View>
        );
    }
}

TrainTimetable.propTypes = {
    showTrainTimetable: PropTypes.bool.isRequired,
    onShowTrainTimetable: PropTypes.func.isRequired,
    onHideTrainTimetable: PropTypes.func.isRequired
};

var styles = StyleSheet.create({
    modalStyle: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.75)',
    },
    box: {
        width: Constants.window.width,position: 'absolute', top: 140, left: 0,
    },
    jutubacolor:{
        color:'#FF6500',fontSize:16
    },
    jucolor:{
        color:'#FF6500',fontSize:12
    },
    whitecolor:{
        color:'white',fontSize:12
    },
    box_ul:{
        marginLeft:10,marginRight:10,width: Constants.window.width-20
    },
    box_ul_cen:{
        justifyContent:'center',alignItems:'center',width: Constants.window.width-20,height:40
    },
    box_ul_bottom:{
        borderColor: '#C56923', borderRadius: 10, borderWidth: 1,
    },
    box_ul_heraer:{
        borderBottomColor:'#FF6600',borderBottomWidth:1,height:40,flexDirection:'row',
    },
    box_block:{
        justifyContent:'center',alignItems:'center'
    },
     box_ul_li:{
        height:30,flexDirection:'row',
    },


});


//解决IOS部分样式不兼容
// iOS Styles
var iosStyles = StyleSheet.create({

})
// Android styles
const androidStyles = StyleSheet.create({

})
const sliderStyles = (Platform.OS === 'ios') ? iosStyles : androidStyles;